<template>
  <div ref="item" class="item"
       v-bind:style="{'margin-left': moveX + 'px'}"
       :class="{'item-choose': isChoose}"
  >
    <div class="phone-msg"
         @touchstart='touchStart'
         @touchmove='touchMove'
         @touchend='touchEnd'
    >
      <div class="circular-blue">
        <div class="circular-white"></div>
      </div>
      <img src="../../assets/img/home/logo-Android.png">
      <span class="dev-type">huawei</span>
      <span class="second-span">已使用2.30G</span>
    </div>
    <div
      @click.stop="editor"
      class="editor"
    >
      <img class="slider-logo" src="../../assets/img/home/editor.png">
    </div>
    <div
      :class="{'isdelete' : isClear}"
      @click.stop="clear"
      class="delete"
    >
      <span v-show="isClear">确定拉黑</span>
      <img v-show="!isClear" class="slider-logo" src="../../assets/img/home/delete.png">
    </div>

  </div>
</template>
<script>

export default {
  name: 'phoneItem',
  data: function () {
    return {
      isShow: false,
      startX: 0, // 开始触摸的位置
      moveX: 0, // 滑动时的位置
      endX: 0, // 结束触摸的位置
      disX: 0, // 移动距离
      slideEffect: '', // 滑动时的效果,使用v-bind:style="deleteSlider"
      editorWidth: document.documentElement.clientWidth / 7.5 * 2.36 * -1,
      isClear: false,
      isChoose: false
    }
  },
  methods: {
    touchStart: function (ev) {
      ev = ev || event
      ev.preventDefault()
      this.isClear = false
      this.isChoose = false
      if (ev.touches.length === 1) { // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
        this.$store.dispatch('addCount')
        this.startX = ev.touches[0].clientX // 记录开始位置
        this.moveX = 0
      }
    },
    touchMove: function (ev) {
      ev = ev || event
      ev.preventDefault()
      if (ev.touches.length === 1) {
        let leftX = ev.touches[0].clientX - this.startX
        if (leftX < 0 && leftX > this.editorWidth) {
          this.moveX = leftX
        }
      }
    },
    touchEnd: function (ev) {
      ev = ev || event
      ev.preventDefault()
      let percent = this.moveX / this.editorWidth
      if (percent > 0.5) {
        this.moveX = this.editorWidth
        this.isChoose = true
      } else {
        this.moveX = 0
      }
    },
    editor: function () {
      console.log('editor')
    },
    clear: function () {
      this.isClear = true
    }
  },
  computed: {
    count1 () {
      return this.$store.state.pageState.phoneControlCount
    }
  },
  watch: {
    count1 (a, b) {
      if (a !== b) {
        this.moveX = 0
        this.isChoose = false
        this.isClear = false
      }
    }
  }
}
</script>

<style scoped>
  .item{
    height: 1.2rem;
    width: calc(100% + 2.36rem);
    border-bottom: solid 1px #c7c5c5;
    position: relative;
    vertical-align: top;
    line-height: 1.18rem;
    z-index: 2;
    transition:margin-left 0.5s, background-color 0.5s;
  }
  .item-choose {
    background-color: #fff;
  }
  .circular-blue{
    position: absolute;
    top: calc( 50% - 0.1rem);
    left: -0.1rem;
    width: 0.2rem;
    height: 0.2rem;
    background-color: #0cc2f7;
    border-radius: 50%;
  }
  .phone-msg {
    position: absolute;
    left: 0;
    top: 0;
    height: 1.18rem;
    width: 6.88rem;
    z-index: -1;
  }
  .circular-white{
    position: absolute;
    left: 0.02rem;
    top: 0.02rem;
    width: 0.16rem;
    height: 0.16rem;
    background-color: #fff;
    border-radius: 50%;
  }
  .item img{
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    left: 0.4rem;
    top: 0.2rem;
  }
  .dev-type{
    display: block;
    font-size: 0.48rem;
    color: #787b7d;
    margin-left: 1.48rem;
    vertical-align: top;
    line-height: 1.18rem;
    width:2rem ;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    word-break:keep-all;
  }
  .second-span{
    position: absolute;
    right: 0.25rem;
    top: 0;
    font-size: 0.3rem!important;
    color: #a7a9aa;
  }
  .editor{
    position: absolute;
    top: 0;
    right: 1.18rem;
    width: 1.18rem;
    height: 1.2rem;
    background-color: #0092f8;
    float: right;
  }
  .delete{
    position: absolute;
    right: 0;
    top: 0;
    width: 1.18rem;
    height: 1.2rem;
    background-color: #e85671;
    float: right;
    transition:width 0.5s;
    text-align: center;
  }
  .delete span {
    color: #fff;
    font-size: 0.3rem;
    vertical-align: top;
  }
  .isdelete{
    width: 2.36rem;
  }
  .slider-logo{
    position: absolute!important;
    height: 0.5rem!important;
    width: 0.5rem!important;
    text-align: center;
    margin-left: -0.05rem;
    top: 0.36rem!important;
  }
</style>
